function Swiper(el)
{
    // this === swiper1/swiper2

    //que 保存大家都需要使用的数据
    this.el = document.querySelector(el)
    this.pages = this.el.querySelectorAll('ul li')
    this.t = null
    this.num = 1

    // 启动插件
    this.init()
}

Swiper.prototype.init = function() { 
    // this === swiper1/swiper2

    // 功能
    // - 自动切换轮播图
    this.autoplay()
    // - 分页器移入
    this.pageOver()
    // - 分页器移出（住：会调用自动切换轮播图原型方法 体现越细越有利于后期优化
    this.pageOut()
}

Swiper.prototype.pageOut = function() { // this === swiper1/swiper2
    // 遍历
    // 挨个：绑定移出事件
    // 事件处理函数中：重新调用autoplay()
    this.pages.forEach(item => { // item就是每一个分页器  也就是li标签对象
        // item.onmouseout = function() { // this 事件源
        item.onmouseout = () => { // this === swiper1/swiper2
            this.autoplay()
        }
    })
}

Swiper.prototype.pageOver = function() { // this === swiper1/swiper2
    // 1 获取【当前】盒模型所有分页器（直接用全局的）
    // 2 遍历
    this.pages.forEach( (item, i) => {// item就是一个个分页器 li标签对象
        // 3 绑定鼠标移入事件（1-清除定时器、2-重置num、3-换成当前图、4-同步分页器）
        // item.onmouseover = function() { // this 事件源 item
        item.onmouseover = () => { // this === swiper1/swiper2
            clearInterval(this.t)
            
            this.num = i+1

            this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`

            this.tbPage(this.num)
        }
    })
}

Swiper.prototype.autoplay = function() { // this === swiper1/swiper2
    // 1 写定时器每隔2s将图片名num++
    // 2 判断num大于6 就重置为1 
    // 3 切换当前盒模型里面的图片
    // let num = 1
    // 1 是隐试声明的全局变量  
    // 2 第一次swiper t=1  第二次 swiper t=2  第一次保存的标识就被覆盖了 ，到时第一次后期无法清除
    // t = setInterval(() => { // this 父function中this 
    this.t = setInterval(() => { // this 父function中this 
        this.num++
        if (this.num>6) this.num = 1
        // document.querySelector('img').src = ''
        // this.el.querySelector('img').src = './imgs/imgnum.jpg'
        this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
        
        // 分页器同步
        // // 1 获取当前选中的分页器去掉样式
        // this.el.querySelector('ul li.active').className = ''
        // // 2 给当前的分页器加样式（规则：num-1等于当前的分页器索引）
        // this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
        this.tbPage(this.num)
    }, 2000)
}

Swiper.prototype.tbPage = function(num) {
    // 1 获取当前选中的分页器去掉样式
    this.el.querySelector('ul li.active').className = ''
    // 2 给当前的分页器加样式（规则：num-1等于当前的分页器索引）
    this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
}
